<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>疫情地图展示</title>
  <style>
      #myEcharts {
          width: 300px;
          height: 300px;
          border: solid 1px red;
          margin: 0 auto;

      }
  </style>
  <script src="../../../js/echarts.min.js"></script>
  <!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->
  <script src="../../../js/map/china.js"></script>

</head>

<body>
<!--为echarts准备一个dom容器-->
<div id="myEcharts"></div>
<script>
  //初始化echarts实例
  var myChart = echarts.init(document.getElementById('myEcharts'));
  // 指定图表的配置项和数据
  option = {
    title: {
      text: '国内售出数量图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['中国疫情图']
    },
    visualMap: {
      type: 'piecewise',
      pieces: [
        { min: 1000, max: 1000000, label: '大于等于1000', color: '#372a28' },
        { min: 500, max: 999, label: '售出500-999', color: '#4e160f' },
        { min: 100, max: 499, label: '售出100-499', color: '#974236' },
        { min: 10, max: 99, label: '售出10-99', color: '#ee7263' },
        { min: 1, max: 9, label: '售出1-9', color: '#efe1db' },
      ],
      color: ['#E0022B', '#E09107', '#A3E00B']
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    roamController: {
      show: true,
      left: 'right',
      mapTypeControl: {
        'china': true
      }
    },
    series: [
      {
        name: '售出数',
        type: 'map',
        mapType: 'china',
        roam: false,
        label: {
          show: true,
          color: 'rgb(249, 249, 249)'
        },
        data: [
          {
            name: '北京',
            value: 212
          }, {
            name: '天津',
            value: 60
          }, {
            name: '上海',
            value: 208
          }, {
            name: '重庆',
            value: 337
          }, {
            name: '河北',
            value: 126
          }, {
            name: '河南',
            value: 675
          }, {
            name: '云南',
            value: 117
          }, {
            name: '辽宁',
            value: 74
          }, {
            name: '黑龙江',
            value: 155
          }, {
            name: '湖南',
            value: 593
          }, {
            name: '安徽',
            value: 480
          }, {
            name: '山东',
            value: 270
          }, {
            name: '新疆',
            value: 29
          }, {
            name: '江苏',
            value: 308
          }, {
            name: '浙江',
            value: 829
          }, {
            name: '江西',
            value: 476
          }, {
            name: '湖北',
            value: 13522
          }, {
            name: '广西',
            value: 139
          }, {
            name: '甘肃',
            value: 55
          }, {
            name: '山西',
            value: 74
          }, {
            name: '内蒙古',
            value: 34
          }, {
            name: '陕西',
            value: 142
          }, {
            name: '吉林',
            value: 42
          }, {
            name: '福建',
            value: 179
          }, {
            name: '贵州',
            value: 56
          }, {
            name: '广东',
            value: 797
          }, {
            name: '青海',
            value: 15
          }, {
            name: '西藏',
            value: 1
          }, {
            name: '四川',
            value: 282
          }, {
            name: '宁夏',
            value: 34
          }, {
            name: '海南',
            value: 79
          }, {
            name: '台湾',
            value: 10
          }, {
            name: '香港',
            value: 15
          }, {
            name: '澳门',
            value: 9
          }
        ]
      }
    ]
  };

  //使用指定的配置项和数据显示图表
  myChart.setOption(option);
  console.log(document.getElementById('myEcharts'))
</script>
</body>

</html>